<template>
	<view class="container" :style="{backgroundImage:'url(' + imageURL + ')', paddingTop: barHeight + 'px'}">
		<view class="bar"
			:style="{height: barHeight + 'px', backgroundColor: 'rgba(255, 255, 255,' + headerOpacity +')'}">
			<!-- <view class="back" @click="back">
				<image src="/static/arrow-down-s-line.png" mode=""
					:style="{filter: 'contrast(' + (headerOpacity > 0 ? '0' : '5') + ')'}"></image>
			</view> -->
		</view>
		<view class="title1">“我参与<text>·</text>齐创建<text>·</text>共文明”</view>
		<view class="title2">文明城市创建知识问答</view>
		<view class="form">
			<view class="form_title">我的得分</view>
			<view class="form_content">
				<view class="charts-box">
					<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
					<view class="date">
						时间：{{ answerInfo.createtime }}
					</view>
				</view>
				<view class="times" v-if="answerInfo.answer_tip">
					{{ answerInfo.answer_tip }}
				</view>
				<view class="userInfo">
					<view class="">
						<text>姓名：</text>
						<text>{{ getName(answerInfo.nickname) }}</text>
					</view>
					<view class="">
						<text>手机：</text>
						<text>{{ answerInfo.mobile }}</text>
					</view>
					<view class="">
						<text>地址：</text>
						<text>{{ answerInfo.address }}</text>
					</view>
				</view>
			</view>
			<button class="submitBtn" @click="onSubmit" v-if="answerInfo.is_answer">重新答题</button>
		</view>
	</view>
</template>

<script>
	import bgBase64 from '@/common/bg.js'
	import { getAchievementApi } from '@/api/api.js'
	export default {
		data() {
			return {
				imageURL: bgBase64,
				barHeight: 0,
				headerOpacity: 0,
				answerInfo: {
					"id": '',
					"question_count": '',//答题数
					"right_count": '',//答对数
					"times": '',//
					"points": '',//得分
					"nickname": "",
					"mobile": "",
					"address": "",
					createtime: '',
					is_answer: false,
					answer_tip: ''
				},
				chartData: {
					categories: [],
					series: []
				},
				opts: {
					title: {
						name: "最后得分",
						fontSize: 18,
						color: "#447df3",
						offsetY: 0
					},
					subtitle: {
						name: "",
						fontSize: 56,
						color: "#447df3",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 8,
							labelColor: "#666666",
							startAngle: 0.8,
							endAngle: 0.2,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: 5,
								splitNumber: 10,
								width: 10,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 10
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					},
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '文明城市创建知识问答'
			}
		},
		onShareTimeline() {
			return {
				title: '文明城市创建知识问答'
			}
		},
		onLoad() {
			this.getSysInfo()
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				getAchievementApi().then(res => {
					let result = {
						categories: [],
						series: [{
							name: "得分",
							data: parseFloat(res.data.points / res.data.total_points)
						}]
					};
					this.opts.subtitle.name = res.data.points
					this.chartData = JSON.parse(JSON.stringify(result));
					this.answerInfo = res.data
				})
			},
			getName(name) {
				let str = name.slice(0, 1)
				let len = name.slice(1).length
				for(var i = 0; i < len; i++) {
					str += '*'
				}
				return str
			},
			back() {
				// uni.navigateBack()
			},
			getSysInfo() {
				uni.getSystemInfo({
					success: (e) => {
						let custom = uni.getMenuButtonBoundingClientRect();
						this.barHeight = custom.bottom + custom.top - e.statusBarHeight;
					},
				})
			},
			onSubmit() {
				uni.redirectTo({
					url: '/pages/index/again?id=' + this.answerInfo.id
				})
			}
		},
		onPageScroll(e) {
			//导航栏渐变
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		}
	}
</script>
<style scoped lang="scss">
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.bar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			height: 100%;
			display: flex;
			align-items: flex-end;
			padding-left: 20rpx;

			.back {
				image {
					display: block;
					transform: rotate(90deg) translateX(-20rpx);
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.title1,
		.title2 {
			font-size: 48rpx;
			color: #1f0b77;
			font-weight: 700;
		}

		.title1 {
			padding-top: 40rpx;
			margin-bottom: 10rpx;
			padding-left: 20rpx;
			text {
				margin: 0 5rpx;
			}
		}

		.title2 {
			padding-left: 1em;
		}

		.form {
			padding: 30rpx;
			margin-top: 115rpx;

			&_title {
				font-size: 36rpx;
				padding: 15rpx 0 20rpx 40rpx;
			}

			&_content {
				padding: 50rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.userInfo {
					font-size: 30rpx;
					border-top: 1px solid #eee;
					padding: 40rpx 0 40rpx;

					view:not(:last-child) {
						margin-bottom: 10rpx;
					}
				}
			}

			.charts-box {
				position: relative;
				width: 100%;
				height: 400rpx;
				padding-top: 40rpx;
				.date {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%) translateY(-45rpx);
					color: #447df3;
					font-size: 20rpx;
				}
			}

			.submitBtn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background-color: #447df3;
				color: #fff;
				font-weight: 700;
				font-size: 34rpx;
				margin-top: 120rpx;
				margin-bottom: 45rpx;
			}
			.times {
				width: 52%;
				margin: 0 auto 30rpx;
				text-align: center;
				color: #f00;
				font-weight: 700;
			}
		}
	}
</style>